<template>
	<view class="container">
		<view class="bg-white p-30 d-flex align-items-center justify-content-between mb-20">
			<view>
				<text class="mr-20">选择的餐桌</text>
				<text>{{ selectedTable.tableId }}</text>
			</view>
			<button type="primary" plain class="font-size-sm line-height-1">自动填写</button>
		</view>
		<view class="bg-white p-30 mb-20">
			<view class="font-size-medium font-weight-bold mb-30">取餐提醒</view>
			<view class="text-color-primary">冰淇淋/鲜食等产品无需等待，可立即向店员领取</view>
		</view>
		<view class="bg-white pt-30 mb-20">
			<view class="font-size-medium font-weight-bold mb-30 pl-30">商品列表</view>
			<list-cell arrow line-right>
				<view class="w-100 d-flex align-items-center overflow-hidden">
					<scroll-view class="flex-fill overflow-hidden" scroll-x>
						<view class="w-100 d-flex align-items-center">
							<image :src="item.image" class="pro-img" v-for="(item, index) in cart" :key="index"></image>
						</view>
					</scroll-view>
					<view class="flex-shrink-0 ml-20">共{{ cartNum }}件</view>
				</view>
			</list-cell>
			<list-cell arrow last>
				<view class="w-100 d-flex align-items-center justify-content-between overflow-hidden">
					<view class="flex-shrink-0">备注</view>
					<navigator hover-class="none" class="flex-fill ml-40 text-truncate text-right" open-type="navigate"
						url="/pages/pay/remark">{{ remark }}</navigator>
				</view>
			</list-cell>
			<list-cell last>
				<view class="w-100 d-flex justify-content-end align-items-center">
					<text class="font-size-sm">共{{ cartNum }}件商品，小计</text>
					<text class="font-size-lg font-weight-bold">￥{{ cartAmount }}</text>
				</view>
			</list-cell>
		</view>
		<list-cell last>
			<view class="w-100 d-flex align-items-center justify-content-between">
				<view>支付方式</view>
				<view class="d-flex align-items-center">
					<image src="/static/images/order/weixin-pay.png" class="wx-pay-icon"></image>
					<view>微信</view>
				</view>
			</view>
		</list-cell>
		<view class="footer">
			<view class="mr-30">
				合计：<text class="font-size-lg font-weight-bold">￥{{ cartAmount }}</text>
			</view>
			<button type="primary" @click="pay()">支付</button>
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell.vue'
	import {
		requst_post_Generateorders,
		requst_post_menuorderByorderId,
		requst_put_Foodtableupdata
	} from '@/api/menu.js'
	export default {
		components: {
			listCell
		},
		data() {
			return {
				cart: uni.getStorageSync('cart'),
				selectedTable: uni.getStorageSync('selectedTable'),
				customer: uni.getStorageSync('userInfo'),
				data: {},
				menuOrderdata: {},
				count:0,
				Foodtableupdata:{}
			}
		},
		computed: {
			cartNum() {
				return this.cart.reduce((acc, cur) => acc + cur.menuNumber, 0)
			},
			cartAmount() {
				return this.cart.reduce((acc, cur) => acc + cur.menuNumber * cur.menuPrice, 0)
			},
			remark() {
				return this.$store.state.remark
			}
		},
		methods: {
			pay() {
				this.data.tableId = this.selectedTable.tableId
				this.data.type = this.remark;
				this.data.customerId = this.customer.customerId;
				if (this.data.customerId === undefined) {
					this.data.customerId = 0
				}
				requst_post_Generateorders(this.data).then(resorders => {
					if (resorders.data.code == 200) {
						uni.setStorageSync('noworderId', resorders.data.data.orderId);
						for (let i = 0; i < this.cart.length; i++) {
							console.log('this.cart.length:', this.cart.length);
							this.menuOrderConditionpost(resorders.data.data.orderId, this.cart[i].menuId, this.cart[i].menuNumber)
						}
					}
				}).catch(err => {
					console.log('ajax_err1', err)
				})
			},
			menuOrderConditionpost(orderId,menuId,menuNumber){
				this.menuOrderdata.orderId = orderId
				this.menuOrderdata.menuId = menuId
				this.menuOrderdata.menuNumber = menuNumber
			requst_post_menuorderByorderId(this.menuOrderdata).then(res => {
				if(res.data){
					this.count = this.count + 1
				}
				if(this.cart.length === this.count){
					this.Foodtableupdata = uni.getStorageSync('selectedTable')
					this.Foodtableupdata.tableCondition = 0
					console.log("sssssssss",this.Foodtableupdata)
					requst_put_Foodtableupdata(this.Foodtableupdata).then(resFoodtable => {
						if (resFoodtable.data.code == 200) {
							console.log("2121111")
						}
					}).catch(err => {
						console.log('requst_put_Foodtableupdata', err)
					})
					wx.showToast({
						title: '点餐成功',
						icon: 'success',
					})
					uni.switchTab({
						url: "../orders/orders",
					})
				}
			})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		padding-bottom: 120rpx;
	}

	.pro-img {
		width: 120rpx;
		height: 90rpx;
		flex-shrink: 0;
	}

	.coupon-label {
		background-color: $color-primary;
		color: #FFFFFF;
		font-size: 18rpx;
		line-height: 0.9rem;
		width: 0.9rem;
		height: 0.9rem;
		margin-left: 10rpx;
		text-align: center;
	}

	.wx-pay-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.footer {
		background-color: #FFFFFF;
		z-index: 10;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		button {
			width: 250rpx;
			text-align: center;
			padding: 0;
			height: 100%;
			line-height: 100rpx;
			border-radius: 0 !important;
			font-size: $font-size-lg;
		}
	}
</style>